<template>
  <div class="back-btn-bg" :style="{'margin-top': statusHeight + 'px'}" @click="onClickLeft">
    <img class="back-btn-image" src="@/assets/image/arrow_back_white.png"/>
  </div>
</template>

<script>
  import {finish, getWindowWidth, getStatusBarHeight, getUserAgent} from '@/utils/app'

  export default {
    name: "BackBtn",
    data() {
      return {
        statusHeight: 0
      }
    },
    created() {
      this.initHeight();
    },
    methods: {
      initHeight() {
        let sh = getStatusBarHeight()
        let w = getWindowWidth()
        sh = parseInt(sh)
        w = parseInt(w)
        let userAgent = getUserAgent()
        if (userAgent == 'android' && window.android) {
          this.statusHeight = 350.0 / (w * 1.0) * sh
        } else if (userAgent == 'ios') {
          this.statusHeight = 0
        }
      },
      onClickLeft() {
        this.$router.back()
        finish()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
